---
title: Getting Started
description: A guide to install Fluid DnD.
---

import { Tabs, TabItem, Code } from "@astrojs/starlight/components";

### Installation

Install **Fluid DnD** using your preferred package manager:

```bash
# with npm:
npm i fluid-dnd

# with yarn:
yarn add fluid-dnd

# with pnpm:
pnpm i fluid-dnd
```

### Usage

#### Usage on global

Setup **composable** (`useDragAndDrop`) using [provide/inject](https://vuejs.org/guide/components/provide-inject) so that the entire application can use it:

export const globalUsage = `
import { createApp } from "vue";
import App from './App.vue';

import { useDragAndDrop } from "fluid-dnd/vue";

const app = createApp(App);

app.provide('useDragAndDrop', useDragAndDrop);

app.mount('#app');`;

<Code code={globalUsage} lang="js" />

#### Usage on local

Import **composable** (`useDragAndDrop`):

export const compositionApiCode = `
<script>
  import { useDragAndDrop } from 'fluid-dnd/vue';
</script>`;

<Code code={compositionApiCode} lang="vue" />
